<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span><b>订单详细信息</b></span>
    </div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span><b>订单信息</b></span>
      </div>
      <el-row>
        <el-col :span="2">&nbsp;</el-col>
        <el-col :span="22">
          <el-row class="margin-bottom-20">
            <el-col :span="2">订单编号:</el-col>
            <el-col :span="6" class="red">{{ order.orderNo }}</el-col>
            <el-col :span="2">交易号:</el-col>
            <el-col :span="6">{{ order.tradeNo }}</el-col>
            <el-col :span="2">交易类型:</el-col>
            <el-col :span="6">{{ order.payTypeName }}</el-col>
          </el-row>
          <el-row class="margin-bottom-20">
            <el-col :span="2">订单状态:</el-col>
            <el-col :span="6">
              <el-tag :type="getOrderStatusClassName(order.orderStatus)">{{ order.orderStatusName }}</el-tag>
            </el-col>
            <el-col :span="2">支付状态:</el-col>
            <el-col :span="6">
              <el-tag :type="getOrderPayStatusClassName(order.payStatus)">{{ order.payStatusName }}</el-tag>
            </el-col>
            <el-col :span="2">物流状态:</el-col>
            <el-col :span="6">
              <el-tag :type="getOrderExpressStatusClassName(order.expressStatus)">{{ order.expressStatusName }}</el-tag>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="2">参与活动:</el-col>
            <el-col :span="20">{{ order.activityTypeName }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="2">订单备注:</el-col>
            <el-col :span="20">{{ order.remark }}</el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-table :data="order.skus" size="small" border class="margin-top-20">
        <el-table-column align="center" label="编码" prop="sn"/>
        <el-table-column align="center" label="图片">
          <template slot-scope="scope">
            <el-image :src="scope.row.url+'_60_60'" fit="fill" style="width: 60px; height: 60px"/>
          </template>
        </el-table-column>
        <el-table-column align="center" label="产品名称" prop="productName" />
        <el-table-column align="center" label="产品规格" prop="skuName" />
        <el-table-column align="center" label="购买数量">
          <template slot-scope="scope">{{ scope.row.buyCount }} {{ scope.row.unit }}</template>
        </el-table-column>
        <el-table-column align="center" label="原价" prop="originalPrice" />
        <el-table-column align="center" label="售价" prop="salePrice" />
        <el-table-column align="center" label="产品金额" prop="payPrice" />
      </el-table>
      <section class="text-right margin-20">
        <el-tag type="info" effect="plain">产品金额:</el-tag> {{ order.productPrice }}元&nbsp;&nbsp;&nbsp;
        <el-tag type="info" effect="plain">运费金额:</el-tag> {{ order.expressPrice }}元&nbsp;&nbsp;&nbsp;
        <el-tag type="info" effect="plain">优惠金额:</el-tag> {{ order.discountPrice }}元&nbsp;&nbsp;&nbsp;
        <el-tag type="danger" effect="dark">订单总金额:</el-tag> <b class="red">{{ order.payPrice }}元</b>
      </section>
    </el-card>
    <div class="margin-bottom-10"/>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span><b>操作日志</b></span>
      </div>
      <el-table :data="order.logs" border>
        <el-table-column align="center" label="类型" prop="typeName" />
        <el-table-column align="center" label="	操作者" prop="operatorName" />
        <el-table-column align="center" label="时间" prop="createDate" sortable/>
        <el-table-column align="center" label="IP" prop="createIp" />
        <el-table-column align="center" label="备注" prop="remark" />
      </el-table>
    </el-card>
    <div class="margin-bottom-10"/>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span><b>物流信息</b></span>
      </div>
      <el-row>
        <el-col :span="2">&nbsp;</el-col>
        <el-col :span="2">收货地址:</el-col>
        <el-col v-if="order.dispatchId===4" :span="20">
          {{ order.dispatchName }}
        </el-col>
        <el-col v-else :span="20">
          {{ order.address.consignee }},&nbsp;&nbsp;{{ order.address.phone }},&nbsp;&nbsp;{{ order.address.address }}
        </el-col>
      </el-row>
      <el-row v-if="order.dispatchId!==4" class="margin-top-20">
        <el-col :span="2">&nbsp;</el-col>
        <el-col :span="12">
          <el-table :data="order.express" border width="350">
            <el-table-column align="center" label="物流名称" prop="name" width="200"/>
            <el-table-column align="center" label="	物流单号" prop="expressNo"/>
          </el-table>
        </el-col>
      </el-row>
    </el-card>
    <div class="margin-bottom-10"/>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span><b>买家信息</b></span>
      </div>
      <el-row>
        <el-col :span="2">&nbsp;</el-col>
        <el-col :span="22">
          <el-row class="margin-bottom-20">
            <el-col :span="2">&nbsp;</el-col>
            <el-col :span="6">
              <el-image v-if="order.user.avatarUrl" :src="order.user.avatarUrl" style="width: 60px; height: 60px" fit="contain"/>
            </el-col>
            <el-col :span="2">昵称:</el-col>
            <el-col :span="6">{{ order.user.nickName }}</el-col>
            <el-col :span="2">手机号码:</el-col>
            <el-col :span="6">{{ order.user.phone }}</el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
    <div class="margin-bottom-10"/>

    <el-footer class="fr">
      <el-button type="info" icon="el-icon-s-fold" @click="backToList">返回列表</el-button>
    </el-footer>
  </el-card>
</template>

<script>
import { OrderService } from '@/api/OrderService'

export default {
  name: 'OrderDetail',
  data() {
    return {
      order: { address: { }, user: {}, logs: [], express: [] }
    }
  },
  created() {
    this.loadOrderDetail()
  },
  methods: {
    backToList: function() {
      this.$router.push({ path: '/business/order' })
    },
    loadOrderDetail() {
      const orderNo = this.$route.query.orderNo
      OrderService.getOrder(orderNo).then(result => {
        if (result) {
          this.order = result
        }
      })
    },
    getOrderStatusClassName(status) {
      switch (parseInt(status, 0)) {
        case 100:
          return 'success'
        case 101:
          return 'danger'
        case 102:
          return 'warning'
        case 103:
          return 'info'
        default:
          return ''
      }
    },
    getOrderPayStatusClassName(payStatus) {
      switch (parseInt(payStatus, 0)) {
        case 300:
          return 'info'
        case 301:
          return 'success'
        case 302:
          return 'danger'
        case 303:
          return 'warning'
        default:
          return ''
      }
    },
    getOrderExpressStatusClassName(expressStatus) {
      switch (parseInt(expressStatus, 0)) {
        case 200:
          return 'info'
        case 201:
          return 'danger'
        case 202:
          return 'success'
        case 203:
          return 'success'
        case 204:
          return 'warning'
        case 205:
          return 'warning'
        default:
          return ''
      }
    }
  }
}
</script>
